<#assign base=request.contextPath /> 
<!DOCTYPE html>
<html>
<head>

<!-- bootstrap css-->
<link href="${base}/web/listbox/css/bootstrap.min.css"  rel="stylesheet" media="screen">
<!-- bootstrap table css -->
<link rel="stylesheet" href="${base}/web/table/bootstrap-table.min.css" />


<!-- 设置该iframe中的背景色 与父页面一致-->
<style type="text/css" >
body { background:#f5f5f5  }
</style>
</head>
<body >
   
    
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">
          <h3 class="panel-title">
             角色入组
          </h3>
   </div>
   
   
   <div class="panel-body">
 	<div class="control-group">
          <label for="name">选择入组角色</label>
              <select class="form-control" id="selectrole">
                 <option>......</option>
                 <option value="doctor">医生</option>
                 <option value="pharmacist">药师</option>
                 <option value="user">患者</option>
                 <option value="assitant" >助手</option>

              </select>
    </div>
    <div id="toolbar"> 
        <button id="accept" class="btn btn-danger" disabled>
            通过
        </button>
         <button id="noaccept" class="btn btn-danger " disabled>
             不通过
        </button>
        
    </div>

    
    <table id="table"
           data-toolbar="#toolbar"
           data-id-field="id"
		   data-page-list="[10]"
		   data-show-refresh="true" 
           data-pagination="true" 
           data-response-handler="responseHandler"  
           >

    </table>

	</div>
 
 </div>





<!-- bootstrap js -->
<script src="${base}/web/vendors/jquery-1.9.1.min.js"></script>
<script src="${base}/web/listbox/js/bootstrap.min.js"></script>



<!-- bootstrap table js-->
<script src="${base}/web/table/bootstrap-table.min.js"></script>

<!-- layer  js-->
<script src="${base}/web/layer/layer.js"></script>

<script>

	    var $table = $('#table'),
		$accept = $('#accept'),
	    $noaccept = $('#noaccept'),
	    selections = [],
	    role='';
	
		 
	   window.operateEvents  = {
				'click .detail': function (e, value, row, index) {	
				    url = "action/detail/"+role+"/"+row.roleid 
					layer.open({
						title:false,
					    type: 2, 
					    content: [url, 'yes'],
					  	offset: '100px',
					  	shade:0.001 ,
					  	area: ['500px', '300px']
					}); 
					
					},
					'click .groupinfo': function (e, value, row, index) {	
				    url = "action/detail/"+role+"/"+row.roleid 
					//开启layer 
					layer.open({
						title:false,
					    type: 2, 
					    content: [url, 'yes'],
					  	offset: '100px', 
					  	area: ['500px', '300px'],
					  	shade:0.001
					}); 
					}
  		  };
		 
		 
		 
		 
        $("#accept,#noaccept").click(function () {
            var ids = getIdSelections();
			
			var url = "action/"+$(this).attr("id")+"/"+role ;
			//ajax
			$.post(url,{"ids":ids },function(res){
				//当服务器返回ok时 
				if(res.status == 'ok'){
				$table.bootstrapTable('remove', {
					  field: 'id',
					  values: ids
				});
				$("#accept,#noaccept").prop('disabled' ,true);
				
	 
				}
			});
			
		});
		
		 
 


	 $("#selectrole").change(function(){
		if( $(this).prop("selectedIndex") != 0){
			var url="data/"+$(this).val();	 
	      
	        role=$(this).val(); 
	      
	         //从服务器刷新数据
   			$table.bootstrapTable("refresh",{
				url:url
			}
		);
						
		}else{
			
			$table.bootstrapTable("refresh",{
				url:"data/EMPTY" 
			});
			role = '';
		}

	});
	

	 $('#table').bootstrapTable({
				columns: [	
				
				{
					field:'state',
					checkbox:true,
					valign:'middle',
					align:'center'
				},
				{
					field: 'id',
					title: 'id',
					valign:'middle',
					align:'center'
				}, {
					field: 'name',
					title: '申请人',
					valign:'middle',
					align:'center'
				}, {
					field: 'group',
					title: '组',
					valign:'middle',
					align:'center'
				}, {
					field: 'rtime',
					title: '申请时间',
					valign:'middle',
					align:'center'
				},{
					field: 'opterate',
					title: '操作',
					formatter : operateFormatter,
					events : operateEvents,
					valign:'middle',
					align:'center',
					
				},	{	
					title:'roleid',
					field: 'roleid', 					
					visible:false		
				}
				],
				sidePagination:'server',
				clickToSelect: true
				
		});
	
       setTimeout(function () {
            $table.bootstrapTable('resetView');
        }, 200);
		
		
	   	 function operateFormatter(value, row, index){
			
			var res = [];
			
			res.push(
			 ' <a class="detail" href="javascript:void(0)" title="个人信息">'
            +'	<i class="glyphicon glyphicon-list-alt"></i>'
            +' </a>'
            );
            
			if(role == 'user') 
			res.push(
			' <a class="groupinfo" href="javascript:void(0)" title="入组信息">'
            +'	<i class="glyphicon glyphicon-credit-card"></i>'
            +' </a>'
            );
			
            
    	 	return res.join('');
	  	 }
		 
		
		
		
		
        $table.on('check.bs.table uncheck.bs.table ' +
                'check-all.bs.table uncheck-all.bs.table', function () {
            $noaccept.prop('disabled', !$table.bootstrapTable('getSelections').length);
			$accept.prop('disabled', !$table.bootstrapTable('getSelections').length);
            // save your data, here just save the current page

            selections = getIdSelections(); 
            // push or splice the selections if you want to save all data selections
        });
    	
		


		 
		 

		


		
        $(window).resize(function () {
            $table.bootstrapTable('resetView', {
                height: getHeight()
            });
        });
		
		
		function getHeight() {
			return $(window).height() - $('h1').outerHeight(true);
		}
		
		
		function getIdSelections() {
			return $.map($table.bootstrapTable('getSelections'), function (row) {
				return row.id
			});
		}
		function responseHandler(res) {

			return res;
		}

	
		
		

</script>
</body>
</html>